<template>
  <div id="app">
    <el-row class="m20">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="车型">
          <el-select v-model.number="formInline.category" placeholder="请选择车型">
            <el-option label="请选择车型" value=""></el-option>
            <el-option label="公路车" value="公路车"></el-option>
            <el-option label="山地车" value="山地车"></el-option>
            <el-option label="电动车" value="电动车"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select v-model.number="formInline.status" placeholder="请选择状态">
            <el-option label="请选择状态" value=""></el-option>
            <el-option label="可租赁" value="可租赁"></el-option>
            <el-option label="租赁中" value="租赁中"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="formInline.color" placeholder="颜色"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="primary" @click="onReSet">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row class="m20">
      <el-button type="danger" @click="handleBatchDelete" plain>批量删除</el-button>
      <el-button type="primary" @click="dialogFormVisible = true" plain>新增</el-button>
    </el-row>

    <el-dialog :visible.sync="dialogFormVisible" title="添加单车" class="custom-dialog">
      <el-form ref="form" :model="form" label-width="100px" class="custom-form">
        <!-- 图片上传区域 -->
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8090/Aupload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.img" :src="require('@/assets/'+form.img)" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 车型选择 -->
        <el-form-item label="车型">
          <el-select v-model.number="form.category" placeholder="请选择车型" class="custom-select">
            <el-option label="公路车" value="公路车"></el-option>
            <el-option label="山地车" value="山地车"></el-option>
            <el-option label="电动车" value="电动车"></el-option>
          </el-select>
        </el-form-item>
        <!-- 颜色输入 -->
        <el-form-item label="颜色">
          <el-input v-model="form.color" class="custom-input"></el-input>
        </el-form-item>
        <!-- 当前状态选择 -->
        <el-form-item label="当前状态">
          <el-select v-model.number="form.status" placeholder="请选择状态" class="custom-select">
            <el-option label="可租赁" value="可租赁"></el-option>
            <el-option label="租赁中" value="租赁中"></el-option>
          </el-select>
        </el-form-item>
        <!-- 日租金输入 -->
        <el-form-item label="日租金">
          <el-input v-model="form.dayPrice" class="custom-input"></el-input>
        </el-form-item>
        <!-- 月租金输入 -->
        <el-form-item label="月租金">
          <el-input v-model="form.monthPrice" class="custom-input"></el-input>
        </el-form-item>
        <!-- 简介输入 -->
        <el-form-item label="简介">
          <el-input v-model="form.description1" type="textarea" class="custom-textarea"></el-input>
        </el-form-item>
        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="insertRec" class="custom-button">提交</el-button>
          <el-button @click="dialogFormVisible = false" class="custom-button">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="dialogFormVisible2" title="修改单车" class="custom-dialog">
      <el-form ref="form2" :model="form2" label-width="100px" class="custom-form">
        <!-- 图片上传区域 -->
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8090/Aupload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="form2.img" :src="require('@/assets/'+form2.img)" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 车型选择 -->
        <el-form-item label="车型">
          <el-select v-model="form2.category" placeholder="请选择车型" class="custom-select">
            <el-option label="公路车" value="公路车"></el-option>
            <el-option label="山地车" value="山地车"></el-option>
            <el-option label="电动车" value="电动车"></el-option>
          </el-select>
        </el-form-item>
        <!-- 颜色输入 -->
        <el-form-item label="颜色">
          <el-input v-model="form2.color" class="custom-input"></el-input>
        </el-form-item>
        <!-- 当前状态选择 -->
        <el-form-item label="当前状态">
          <el-select v-model="form2.status" placeholder="请选择状态" class="custom-select">
            <el-option label="可租赁" value="可租赁"></el-option>
            <el-option label="租赁中" value="租赁中"></el-option>
          </el-select>
        </el-form-item>
        <!-- 日租金输入 -->
        <el-form-item label="日租金">
          <el-input v-model="form2.dayPrice" class="custom-input"></el-input>
        </el-form-item>
        <!-- 月租金输入 -->
        <el-form-item label="月租金">
          <el-input v-model="form2.monthPrice" class="custom-input"></el-input>
        </el-form-item>
        <!-- 简介输入 -->
        <el-form-item label="简介">
          <el-input v-model="form2.description1" type="textarea" class="custom-textarea"></el-input>
        </el-form-item>
        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="updateRec" class="custom-button">提交</el-button>
          <el-button @click="dialogFormVisible2 = false" class="custom-button">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-row class="m20">
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column label="图片" width="150">
          <template slot-scope="scope">
            <img :src="require('@/assets/' + scope.row.img)" class="table-img" />
          </template>
        </el-table-column>
        <el-table-column prop="category" label="车型" width="80"></el-table-column>
        <el-table-column prop="color" label="颜色" width="80"></el-table-column>
        <el-table-column prop="status" label="当前状态" width="100"></el-table-column>
        <el-table-column prop="dayPrice" label="日租金" width="80"></el-table-column>
        <el-table-column prop="monthPrice" label="月租金" width="80"></el-table-column>
        <el-table-column prop="count" label="单数" width="100"></el-table-column>
        <el-table-column prop="description1" label="简介" width="100"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="m20">
<!--      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="arrPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">-->
<!--      </el-pagination>-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-row>
  </div>
</template>
handleSizeChange: function (val) {
this.pageSize = val
this.currentPage = 1
this.queryPage()
},
handleCurrentChange: function (val) {
this.currentPage = val
this.queryPage()
},
<script>
export default {

  data() {
    return {
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {},
      form2: {},
      formLabelWidth: '120px',
      currentPage: 2,
      pageSize: 10,
      total: 0,
      arrPage: [10, 20, 30, 40, 50],
      formInline: {},
      currentPage4: 4
    }
  },
  mounted: function () {
    this.queryPage()
  },
  methods: {
    queryPage: async function () {

      console.log("----------------------")
      console.log(this.currentPage)
      console.log(this.pageSize)
      console.log("----------------------")
      let params = this.currentPage +"/"+ this.pageSize
      let result = await this.$axios.get("Abike/selectPage/" + params)
      console.log(result)
      this.tableData = result.data.data
      this.total = result.data.total
    },
    handleBatchDelete: async function () {
      this.$confirm('是否删除？', '提示,', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let idList = this.multipleSelection.map(brand => brand.id)
        console.log(idList)
        let res = await this.$axios.post("deleteMore", idList)
        if (res.status === 200) {
          console.log("删除成功")
          this.$message({
            message: '删除成功',
            type: 'info'
          });
          this.queryPage()
        } else {
          console.log("删除失败")
          console.log(res)
          this.$message({
            message: '删除失败',
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: '已取消删除',
          type: 'info'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit: async function (index, row) {
      console.log(index, row.id)
      let res = await this.$axios.get("Abikesel/" + row.id)
      this.form2=res.data.data
      this.dialogFormVisible2 = true;
    },
    handleDelete: async function (index, row) {
      console.log(index, row)
      let res = await this.$axios.delete("Abikedel/" + row.id)

      if (res.status === 200) {
        console.log("删除成功")
        this.$message({
          message: '删除成功',
          type: 'info'
        });
        this.queryPage()
      } else {
        console.log("删除失败")
        this.$message({
          message: '删除失败',
          type: 'error'
        });
        console.log(res)
      }
    },
    onQuery: async function () {
      console.log(this.formInline);
      let params = this.currentPage +"/"+ this.pageSize
      let result = await this.$axios.post("AbikeSelDsql/" + params, this.formInline)
      console.log(result)
      this.tableData = result.data.data
      this.total = result.data.total
      // this.formInline = {}
    },
    onReSet: function(){
      this.formInline={};
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.currentPage = 1
      this.queryPage()
    },
    handleCurrentChange: function (val) {
      this.currentPage = val
      this.queryPage()
    },

    tableRowClassName({
                        row,
                        rowIndex
                      }) {
      if (rowIndex % 2 == 1) {
        return 'success-row';
      }
      return '';
    },
    updateRec: async function () {
      let res = await this.$axios.post("Abikeupd", this.form2)
      if (res.status === 200) {
        console.log("修改成功")
        this.$message({
          message: '修改成功',
          type: 'info'
        });
        this.dialogFormVisible2 = false
        this.queryPage()
      } else {
        console.log("修改失败")
        console.log(res)
        this.$message({
          message: '修改失败',
          type: 'error'
        });
      }
    },
    insertRec: async function () {

      let res = await this.$axios.post("Abikeins", this.form)
      if (res.status === 200) {
        console.log("新增成功")
        this.$message({
          message: '新增成功',
          type: 'info'
        });
        this.dialogFormVisible = false
        this.queryPage()
      } else {
        console.log("新增失败")
        console.log(res)
        this.$message({
          message: '新增失败',
          type: 'error'
        });
      }
    },
    handleAvatarSuccess(response, file) {
      // 图片上传成功的处理逻辑
      const url=file.raw.name
      this.form.img = url
    },
    handleAvatarSuccess2(response, file) {
      // 图片上传成功的处理逻辑
      const url=file.raw.name
      this.form2.img = url
    },
    beforeAvatarUpload(file) {
      // 在上传之前的处理逻辑，例如文件大小限制、文件类型限制等
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!(isJPG || isPNG)) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return (isJPG || isPNG) && isLt2M;
    }

  }
}
</script>

<style>
.table-img {
  width: 100px; /* 根据需要调整宽度 */
  height: 100px; /* 根据需要调整高度 */
  object-fit: cover; /* 裁剪图片以适应容器 */
  border-radius: 4px; /* 可以保留一些圆角 */
}
.m20 {
  margin-bottom: 10px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
/* 图片上传区域样式 */
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 4px; /* 移除圆形效果 */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px; /* 设置宽度 */
  height: 100px; /* 设置高度，与宽度相同 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.avatar {
  width: 100%; /* 填充整个上传区域 */
  height: 100%; /* 填充整个上传区域 */
  object-fit: cover; /* 裁剪图片以适应方形 */
  border-radius: 4px; /* 可以保留一些圆角 */
}
.custom-dialog .avatar-uploader .avatar {
  width: 100px; /* 调整图片宽度 */
  height: 100px; /* 调整图片高度 */
  object-fit: cover; /* 裁剪图片以适应容器 */
  border-radius: 50%; /* 圆形图片 */
  border: 1px solid #dcdfe6; /* 边框样式 */
}

.custom-dialog .avatar-uploader-icon {
  font-size: 28px; /* 调整图标大小 */
  color: #8c939d; /* 图标颜色 */
}

.custom-select .el-input__inner {
  border-radius: 4px; /* 输入框圆角 */
}

.custom-input .el-input__inner {
  border-radius: 4px; /* 输入框圆角 */
}

.custom-textarea .el-textarea__inner {
  border-radius: 4px; /* 文本域圆角 */
}

.custom-button {
  margin-top: 10px; /* 按钮间距 */
  padding: 10px 20px; /* 按钮内边距 */
  font-size: 16px; /* 按钮字体大小 */
}
/* 图片上传区域样式 */
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%; /* 根据需要调整宽度 */
  height: 100%; /* 根据需要调整高度 */
  display: block;
  object-fit: cover; /* 裁剪图片以适应容器 */
}

/* 对话框和表单样式 */
.custom-dialog .el-dialog {
  width: 50%; /* 根据需要调整宽度 */
}

.custom-form .el-form-item {
  margin-bottom: 20px; /* 增加表单项间距 */
}

.custom-form .el-form-item__label {
  font-weight: bold; /* 加粗标签 */
}

.custom-form .el-form-item__content {
  font-size: 14px; /* 增加内容字体大小 */
}

.custom-button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>
